{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<!-- Copyright 2015 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0
that can be found in the LICENSE file. -->
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <title>{{template "title" .}}</title>
  <style type="text/css">
    body {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    body.anonymous {
      background-color: #eee;
    }
    .navbar {
      margin-bottom: 20px;
    }
    #account-picture-nav {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    #account-picture-nav img {
      border-radius: 6px;
    }
    #account-text-nav {
      margin-left: 8px;
      margin-right: 0px;
    }
    .popover{
      max-width: 400px;
    }
    footer hr {
      margin: 10px 0px;
    }
  </style>
  {{template "head" .}}
</head>

{{if .IsAnonymous}}
<body class="anonymous">
{{else}}
<body>
{{end}}
  <div class="modal fade" tabindex="-1" role="dialog" id="pause-job-modal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Pausing</h4>
        </div>
        <div class="modal-body">
          <form id="pause-job-prompt-form">
            <div class="form-group">
              <label for="pause-reason" class="control-label">
                Provide a reason (it will be recorded):
              </label>
              <input type="text" class="form-control" id="pause-reason">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary" id="pause-btn" form="pause-job-prompt-form">Pause</button>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle"
                data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <span class="navbar-brand">
          <span id="progress-spinner" class="not-spinning">
            <a href="/">LUCI Scheduler</a>
          </span>
        </span>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav"></ul>
        <p class="nav navbar-text navbar-right" id="account-text-nav">
          {{if .IsAnonymous}}
            <a href="{{.LoginURL}}" class="navbar-link">Login</a>
          {{else}}
            <span>{{.User.Email}}</span>
            <span> |</span>
            <a href="{{.LogoutURL}}" class="navbar-link">Logout</a>
          {{end}}
          {{if .User.Picture}}
          <p class="nav navbar-right" id="account-picture-nav">
            <img src="{{.User.Picture}}" width="30" height="30">
          </p>
          {{end}}
        </p>
      </div>
    </div>

    <div id="content-box">
      {{template "content" .}}
    </div>

    <footer>
      <hr>
      <p class="text-right" style="color: #cccccc">
        <small>Handled in <span>{{call .HandlerDuration}}</span></small>
        <small style="margin-left: 20px">Version: <span>{{.AppVersion}}</span></small>
      </p>
    </footer>
  </div>

  <script src="/static/jquery/jquery.min.js"></script>
  <script src="/static/bootstrap/js/bootstrap.min.js"></script>
  <script>
    var xsrfToken = "{{.XsrfToken}}";

    function jobFromButton(btn) {
      var form = $(btn).closest("form");
      return {
        project: $("input#projectID", form).val(),
        job: $("input#jobName", form).val(),
      };
    };

    function invocationFromButton(btn) {
      var form = $(btn).closest("form");
      return {
        project: $("input#projectID", form).val(),
        job: $("input#jobName", form).val(),
        invocation: $("input#invID", form).val(),
      };
    };

    function postJobAction(btn, action, reason) {
      var form = $(btn).closest("form");
      if (!form.attr("submitted")) {
        var job = jobFromButton(btn);
        var url = "/actions/" + action + "/" + job.project + "/" + job.job;
        $("#xsrf_token", form).val(xsrfToken);
        $("#reason", form).val(reason || "");
        form.attr("action", url);
        form.attr("submitted", "yes");
        form.submit();
      }
    };

    function postInvocationAction(btn, action) {
      var form = $(btn).closest("form");
      if (!form.attr("submitted")) {
        var inv = invocationFromButton(btn);
        var url = "/actions/" + action + "/" + inv.project + "/" + inv.job + "/" + inv.invocation;
        $("#xsrf_token", form).val(xsrfToken);
        form.attr("action", url);
        form.attr("submitted", "yes");
        form.submit();
      }
    };

    $("#pause-job-modal").on("show.bs.modal", function(event) {
      // The modal dialog itself.
      var modal = $(this);
      // The button that triggered the modal. Indirectly points to the job.
      // Consumed by postJobAction.
      var pauseBtn = $(event.relatedTarget);

      // Indicate which job we are pausing.
      $(".modal-title", modal).text("Pausing " + jobFromButton(pauseBtn).job);

      // Actually pause the job when the prompt is closed affirmatively.
      modal.unbind("submit");
      modal.submit(function(event) {
        // Disable form buttons and prevent the modal from closing, the page
        // will reload after postJobAction call.
        $("button", modal).prop("disabled", true);
        $("input", modal).prop("disabled", true);
        $("#pause-btn", modal).text("Pausing");
        modal.off("keydown.dismiss.bs.modal");

        // Initiate the action, this will reload the page eventually.
        postJobAction(pauseBtn, "pauseJob", $("#pause-reason", modal).val());

        // Prevent default form submission handler (GET request).
        event.preventDefault();
      });
    });

    // Auto-focus the input box when the modal is shown.
    $("#pause-job-modal").on("shown.bs.modal", function() {
      $("#pause-reason", $(this)).focus();
    });

    // Initialize all popovers.
    $('[data-toggle="popover"]').popover();
  </script>
</body>

</html>
{{end}}


{{define "job-action-buttons"}}
<form style="display: inline" method="POST">
  <input type="hidden" id="xsrf_token" name="xsrf_token" value="">
  <input type="hidden" id="projectID" value="{{.ProjectID}}">
  <input type="hidden" id="jobName" value="{{.JobName}}">
  <input type="hidden" id="reason" name="reason" value="">
  <div class="btn-group btn-group-xs" style="width: 160px" role="group">
    {{if .Paused}}
      <button {{if not .CanResume}}disabled{{end}} type="button"
              class="btn btn-primary"
              onclick="postJobAction(this, 'resumeJob')">
        Resume
      </button>
    {{else}}
      <button {{if not .CanPause}}disabled{{end}} type="button"
              class="btn btn-primary"
              data-toggle="modal" data-backdrop="static"
              data-target="#pause-job-modal">
        Pause
      </button>
    {{end}}
    <button {{if not .CanAbort}}disabled{{end}} type="button"
            class="btn btn-danger"
            onclick="postJobAction(this, 'abortJob')">
      Abort
    </button>
    <button {{if not .CanTrigger}}disabled{{end}} type="button"
            class="btn btn-success"
            onclick="postJobAction(this, 'triggerJob')">
      Trigger
    </button>
  </div>
</form>
{{end}}


{{define "invocation-action-buttons"}}
<form style="display: inline" method="POST">
  <input type="hidden" id="xsrf_token" name="xsrf_token" value="">
  <input type="hidden" id="projectID" value="{{.ProjectID}}">
  <input type="hidden" id="jobName" value="{{.JobName}}">
  <input type="hidden" id="invID" value="{{.InvID}}">
  <div class="btn-group btn-group-xs" role="group">
    <button {{if not .CanAbort}}disabled{{end}} type="button"
            class="btn btn-danger"
            onclick="postInvocationAction(this, 'abortInvocation')">
      Abort
    </button>
  </div>
</form>
{{end}}


{{define "job-id-ref"}}
<span class="glyphicon {{.JobFlavorIcon}}" aria-hidden="true" title="{{.JobFlavorTitle}}">
</span>
<a href="/jobs/{{.ProjectID}}/{{.JobName}}">{{.JobName}}</a>
{{end}}

{{define "job-id-static"}}
<span class="glyphicon {{.JobFlavorIcon}}" aria-hidden="true" title="{{.JobFlavorTitle}}">
</span>
{{.JobName}}
{{end}}

{{define "triggers-list"}}
<ul>
  {{range .}}
  <li>
    <span style="font-family:monospace;">
    {{if .URL}}
      <a href="{{.URL}}" target="_blank">{{.Title}}</a>
    {{else}}
      {{.Title}}
    {{end}}
    </span>
    ({{.RelTime}}{{if .EmittedBy}} by <b>{{.EmittedBy}}</b>{{end}})
  </li>
  {{end}}
</ul>
{{end}}
